@import "./node_modules/ng-zorro-antd/ng-zorro-antd.less";

.login-form-div {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  background-image: url("src/assets/login/login.jpg");
  background-size: 100% 100%;
  position: relative;

  .login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 60%;
    height: 100%;

    .login-form-div-holder {
      -moz-box-shadow: 0 3px 6px 64px rgba(0, 0, 0, 0.12), 0 6px 16px 64px rgba(0, 0, 0, 0.08), 0 9px 28px 64px rgba(0, 0, 0, 0.05);
      -webkit-box-shadow: 0 3px 6px 64px rgba(0, 0, 0, 0.12), 0 6px 16px 64px rgba(0, 0, 0, 0.08), 0 9px 28px 64px rgba(0, 0, 0, 0.05);
      box-shadow: 0 3px 6px 64px rgba(0, 0, 0, 0.12), 0 6px 16px 64px rgba(0, 0, 0, 0.08), 0 9px 28px 64px rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      padding: 60px 80px 35px;
      width: 50%;
      background-color: #9fb7b2a8;
    }

    .login-form-div-holder:hover {
      box-shadow: 0 3px 6px 64px rgba(0, 0, 0, 0.18), 0 6px 16px 0 rgba(0, 0, 0, 0.16), 0 9px 28px 8px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 3px 6px 64px rgba(0, 0, 0, 0.18), 0 6px 16px 0 rgba(0, 0, 0, 0.16), 0 9px 28px 8px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: 0 3px 6px 64px rgba(0, 0, 0, 0.18), 0 6px 16px 0 rgba(0, 0, 0, 0.16), 0 9px 28px 8px rgba(0, 0, 0, 0.1);
      background-color: #b8d7d0d6;
    }

    .title-div {
      text-shadow: 0 5px 15px #333333;
      margin-bottom: 30px;

      span {
        color: @primary-color;
      }
    }
  }
}
